$(function () {
  const layer = layui.layer
  const form = layui.form
  const laypage = layui.laypage;


  // 定义分页参数
  let q = {
    advposdesc: '',  //广告位描述
    advposname: '',  //广告位名称
    page: 1,  //页码
    limit: 10, //每页数量
  }

  initArtList()

  // 定义获取广告位列表函数   分页接口
  function initArtList() {
    $.ajax({
      url: '/ydd_advpos/list',
      method: 'GET',
      data: q,
      success: res => {
        // console.log(res);
        if (res.errno !== 0) return layer.msg('获取数据失败')
        const htmlStr = res.data.data.map((item, index) => {

          return `
                  <tr>
                    <td>${index + 1}</td>
                    <td>${item.advposname}</td>
                    <td>${item.advposdesc}</td>
                    <td>${item.advposnum}</td>
                    <td>${item.advpossize}</td>
                    <td>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="xiugai">
                         <i class="layui-icon">&#xe642;</i>
                     </button>
                    <button type="button" class="layui-btn  layui-btn-danger layui-btn-sm" id="shangchu">
                         <i class="layui-icon">&#xe640;</i>
                     </button>
                    </td>
                  </tr>
              `
        }).join('')
        $('tbody').html(htmlStr)

        //  调用分页方法
        renderPage(res.data.count)
      }
    })
  }

  //  分页逻辑
  function renderPage(total) {
    laypage.render({
      elem: 'pageBox',  //注意，这里的 pageBox 是 ID，不用加 # 号
      count: total,     //数据总数，从服务端得到
      curr: q.page,     //当前的页码
      limit: q.limit,    //每页 显示的条数
      limits: [3, 5, 10, 20],  // 每页条数的选择项
      layout: ['count', 'limit', 'prev', 'page', 'next'], // 看文档资料

      // 当分页被切换时触发
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr);  得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); 得到每页显示的条数

        // 触发分页回调，修改查询条件
        q.page = obj.curr
        q.limit = obj.limit

        //首次不执行
        if (!first) {
          initArtList()
        }
      }

    });
  } 

  //  先定义全局变量、后面用来进行存储 layerIndex 的值
  let layerIndex = null
  const add = document.querySelector('.add')
  // 新增逻辑
  add.addEventListener('click', function () {
    layerIndex = layer.open({
      type: 1,
      title: '添加广告位',
      area: ['800px', '400px'],
      content: $('#tplAdd').html()
    });
  })

  // 事件委派写法 发起添加ajax请求
  // 因为添加类别确认的弹框页面初始化的时候没有，是点击按钮时候才生成的生成的
  // 所以使用事件委托绑定submit事件
  $('body').on('submit', '#add-form', function (e) {
    // 阻止表单默认跳转
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/ydd_advpos/add',
      data: $(this).serialize(),
      success: res => {
        console.log(res);
        if (res.errno !== 0) return layer.msg('获取数据失败')
        layer.msg('添加成功')
        // 新增成功关闭弹窗
        layer.close(layerIndex)
        // 渲染数据
        initArtList()
      }
    })
  })


  // 利用事件委托给编辑按钮绑定点击事件
  // 获取数据
  $('tbody').on('click', '#xiugai', function () {
    layerIndex = layer.open({
      type: 1,
      area: ['768px', '380px'],
      title: '修改广告位',
      content: $('#editCateTpl').html()
    });

    //  获取参数 id 值
    let id = $(this).attr("data-id");

    $.ajax({
      method: 'GET',
      url: '/ydd_advpos/rowInfo',
      data: { id },
      success: res => {
        // console.log(res);
        if (res.errno) return layer.msg('获取数据失败')
        // 成功  表单快速赋值
        form.val('edit_form', res.data)
      }
    })
  })

  // 监听编辑表单提交，调用编辑分类接口
  $('body').on('submit', '#edit-form', e => {
    // 阻止表单默认提交
    e.preventDefault()

    $.ajax({
      method: 'POST',
      url: '/ydd_advpos/update',
      data: $('#edit-form').serialize(),
      success: res => {
        //  console.log(res);
        if (res.errno) return layer.msg('广告位修改失败')
        layer.msg('广告位更新成功')
        // 关闭弹出层
        layer.close(layerIndex)
        // 渲染数据
        initArtList()
      }
    })
  })


  // 删除逻辑
  $('body').on('click', '.spanDel', function () {
    //获得 id 参数  
    const id = $(this).attr('data-id')

    // 根据删除的按钮个数判断出当前这一页的数据条数 
    const btnLength = $('.spanDel').length
    console.log(btnLength);

    layer.confirm('确定删除吗？', { icon: 3, title: '提示' }, function (index) {
      $.ajax({
        method: 'GET',
        url: '/ydd_advpos/del',
        data: { id },
        success: res => {
          // console.log(res);
          if (res.errno !== 0) return layer.msg('删除失败')

          layer.msg('删除成功')

          // 删除成功后当前数据是不是只有一条，如果只有一条，并且页码值大于 1。则 页码值回退一页
          if (btnLength === 1 && q.page > 1) {
            q.page = q.page - 1
          }

          // 渲染数据
          initArtList()
        }
      })
      layer.close(index);
    });
  })


  // 筛选功能逻辑
  $('#searchFrom').on('submit', function (e) {
    // 阻止表单默认提交行为
    e.preventDefault()

    q.advposname = $('[name = advposname]').val()

    // 渲染数据
    initArtList()
  })

  // 重置逻辑
  $('#chongzhi').on('click', () => {
    q.page = 1
    q.limit = 10
    q.advposname = ''
    layer.msg('重置成功')

    initArtList()
  })

  // 点击按钮 折叠
  $('.zedie').on('click', function () {
    //  console.log(11);
    $('.zd').toggle()
  })

  // 点击刷新图标 重新渲染列表
  $('.shuaxin').on('click', function () {
    q.page = 1
    q.limit = 10
    q.advposname = ''
    layer.msg('刷新成功')
    initArtList()
  })
})